// vue.config.js
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

const webpack = require("webpack");

const isProduction = process.env.NODE_ENV === "production";

/**
 *  webpackAnalyzer 配置 运行 npm run analyz 可以查看打包情况
 */
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const webpackAnalyzerConfig = config => {
  if (process.env.npm_config_report) {
    config.plugins.push(new BundleAnalyzerPlugin());
  }
};

/**
 *  loash按需加载 配置
 */
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const lodashConfig = config => {
  config.plugins.push(new LodashModuleReplacementPlugin());
};

/**
 * i18 webpack 单文件配置
 * @param config
 */
const i18Config = config => {
  config.module
    .rule("i18n")
    .resourceQuery(/blockType=i18n/)
    .type("javascript/auto")
    .use("i18n")
    .loader("@kazupon/vue-i18n-loader")
    .end();
};

const provideConfig = config => {
  config.plugin("provide").use(webpack.ProvidePlugin, [
    {
      // _: "lodash"
    }
  ]);
};

/**
 * gzip模式
 * @param config
 */
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

const gzipConfig = config => {
  config.plugins.push(
    new CompressionWebpackPlugin({
      algorithm: "gzip",
      test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
      threshold: 10240,
      minRatio: 0.8
    })
  );
};

module.exports = {
  //基本路径
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

  //build输出的文件夹
  outputDir: "dist",

  //build输出存放静态资源的文件夹
  assetsDir: "",

  //builds输出访问的index.html
  indexPath: "index.html",

  //生成的静态资源在其文件名中包含哈希值，以便更好地进行缓存控制
  filenameHashing: true,

  //以多页模式构建应用程序。
  // pages: {
  //   index: {
  //     //   页面入口
  //     entry: 'src/index/main.js',
  //     // 页面文件模版
  //     template: 'public/index.html',
  //     // 输出build 后的文件index.html
  //     filename: 'index.html',
  //     // when using title option,(html title属性设置)
  //     // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
  //     title: 'Index Page',
  //     // chunks to include on this page, by default includes
  //     // extracted common chunks and vendor chunks.
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   },
  //   // when using the entry-only string format,
  //   // template is inferred to be `public/subpage.html`
  //   // and falls back to `public/index.html` if not found.
  //   // Output filename is inferred to be `subpage.html`.
  //   subpage: 'src/subpage/main.js'
  // }
  pages: undefined,

  // 使用运行时编译器的 Vue 构建版本
  runtimeCompiler: true,

  // 开启生产环境SourceMap
  productionSourceMap: false,

  // 关闭ESLint
  lintOnSave: undefined,

  //默认情况下babel-loader忽略其中的所有文件node_modules。如果要使用Babel显式转换依赖关系，可以在此选项中列出它
  transpileDependencies: [],

  //在生成的HTML中配置crossorigin属性<link rel="stylesheet">和<script>标记。
  crossorigin: undefined,

  //设置为在生成的HTML中true启用子资源完整性（SRI）<link rel="stylesheet">和<script>标记。如果您在CDN上托管构建的文件，最好启用此功能以获得额外的安全性。
  integrity: false,

  //是否thread-loader用于Babel或TypeScript转换。当系统具有多于1个CPU核心时，将为生产构建启用此功能
  parallel: require("os").cpus().length > 1,

  //将选项传递给PWA插件。
  // PWA:{},

  devServer: {
    open: false, // 是否自动打开浏览器页面
    host: "0.0.0.0", // 指定使用一个 host，默认是 localhost
    port: 8080, // 端口地址
    https: false // 使用https提供服务
    // 设置代理
    // proxy:{}// 'http://api.zhuishushenqi.com'
  },

  chainWebpack: config => {
    // config.resolve.alias
    //   .set("@", resolve("src"))
    //   .set("assets", resolve("src/assets"))
    //   .set("components", resolve("src/components"));

    provideConfig(config);
    i18Config(config);
  },

  //如果值是Object，则它将使用webpack-merge合并到最终配置中。
  //如果值是函数，它将接收已解析的配置作为参数。该函数可以改变配置并返回任何内容，或者返回配置的克隆或合并版本。
  configureWebpack: config => {
    webpackAnalyzerConfig(config);
    lodashConfig(config);

    if (isProduction) {
      gzipConfig(config);
    }
  },
  css: {
    //默认情况下，只有以文件结尾的文件*.module.[ext]才会被视为CSS模块。将此设置为true允许您.module放入文件名并将所有*.(css|scss|sass|less|styl(us)?)文件视为CSS模块。
    modules: false,
    //是否将组件中的CSS提取到独立的CSS文件中（而不是在JavaScript中内联并动态注入）。
    extract: process.env.NODE_ENV === "production",
    //是否为CSS启用源映射。将此设置为true可能会影响构建性能。
    sourceMap: false,
    loaderOptions: {
      sass: {
        data: `
                @import "@/common/css/extend.scss";
                `
      }
    }
  },

  //因此它可以用于将任意选项传递给第三方插件
  pluginOptions: {
    i18n: {
      locale: process.env.VUE_APP_I18N_LOCALE || "cn",
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "cn",
      localeDir: "locales",
      enableInSFC: true
    }
  }
};
